<template>
  <div class="home-page">
    <!-- 用户信息栏 -->
    <div class="user-info-bar">
      <div class="user-avatar">
        <van-icon v-if="!userInfo?.avatar" name="contact" size="25" color="#1989fa" />
        <img v-else :src="userInfo.avatar" alt="头像" />
      </div>
      <div class="user-details">
        <div class="user-name">{{ userInfo?.nickname || userInfo?.username || '未登录' }}</div>
        <div class="user-role">{{ userInfo?.role || '普通用户' }}</div>
      </div>
      <div class="logout-btn" @click="handleLogout">
        <van-icon name="close" />
        退出
      </div>
    </div>

    <!-- 顶部时钟和金额展示 -->
    <div class="header" :class="{ 'income': todayTotal >= 0 }">
      <div class="time">{{ currentTime }}</div>
      <div class="amount">
        <span class="label">今日累计：</span>
        <span class="value">¥{{ todayTotal.toFixed(2) }}</span>
      </div>
    </div>

    <!-- 三色功能按钮 -->
    <div class="action-buttons">
      <van-button 
        class="btn new-record" 
        block 
        color="#1989fa"
        size="large"
        @click="handleNotImplemented('新记账')"
      >
        新记账
      </van-button>
      <van-button 
        class="btn history" 
        block 
        color="#ff9900"
        size="large"
        @click="handleNotImplemented('查旧账')"
      >
        查旧账
        <div class="btn-hint">查看历史交易记录</div>
      </van-button>
      <van-button 
        class="btn settlement" 
        block 
        color="#07c160"
        size="large"
        @click="handleNotImplemented('下班结算')"
      >
        下班结算
      </van-button>
    </div>

    <!-- 快捷功能入口 -->
    <div class="quick-actions">
      <div class="quick-actions-title">快捷功能</div>
      <div class="quick-actions-grid">
        <div class="quick-action-item" @click="handleNotImplemented('销售排行')">
          <van-icon name="chart-trending-o" size="24" color="#ee0a24" />
          <span>销售排行</span>
        </div>
        <div class="quick-action-item" @click="router.push('/customer')">
          <van-icon name="contact" size="24" color="#1989fa" />
          <span>客户管理</span>
        </div>
        <div class="quick-action-item" @click="router.push('/category')">
          <van-icon name="shopping-cart-o" size="24" color="#07c160" />
          <span>商品管理</span>
        </div>
        <div class="quick-action-item" @click="handleNotImplemented('系统设置')">
          <van-icon name="setting-o" size="24" color="#ff9900" />
          <span>系统设置</span>
        </div>
      </div>
    </div>

    <!-- 语音记账入口 -->
    <div class="voice-record">
      <van-button 
        class="voice-btn"
        round
        block
        color="#ff976a"
        size="large"
        @touchstart="startVoiceRecord"
        @touchend="endVoiceRecord"
      >
        按住说话记账
      </van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showDialog } from 'vant'
import { logout, getUserInfo, getUserById } from '../api/user'

const router = useRouter()
const currentTime = ref('00:00:00')
const todayTotal = ref(0)
let timer: number

// 更新时间
const updateTime = () => {
  const now = new Date()
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  const seconds = String(now.getSeconds()).padStart(2, '0')
  currentTime.value = `${hours}:${minutes}:${seconds}`
}

// 语音记账相关
const startVoiceRecord = () => {
  showToast('开始录音...')
  // TODO: 实现语音识别功能
}

const endVoiceRecord = () => {
  showToast('录音结束，正在识别...')
  // TODO: 实现语音识别功能
}

// 当前用户信息
const userInfo = ref(getUserInfo())

// 更新当前用户的完整信息
const updateUserInfo = async () => {
  const storedUser = getUserInfo()
  if (storedUser && storedUser.id) {
    try {
      const userDetail = await getUserById(storedUser.id)
      if (userDetail) {
        // 合并本地存储的信息和新获取的信息
        userInfo.value = {
          ...storedUser,
          ...userDetail
        }
      }
    } catch (error) {
      console.error('获取用户详情失败:', error)
    }
  }
}

// 退出登录
const handleLogout = () => {
  showDialog({
    title: '退出登录',
    message: '确定要退出登录吗？',
    showCancelButton: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  }).then(async () => {
    const success = await logout()
    if (success) {
      showToast({
        type: 'success',
        message: '已退出登录',
        position: 'bottom'
      })
      // 跳转到登录页
      router.push('/login')
    }
  }).catch(() => {
    // 取消退出
  })
}

// 处理暂未实现的功能
const handleNotImplemented = (featureName: string) => {
  showToast({
    type: 'fail',
    message: `${featureName}功能开发中...`,
    position: 'bottom',
    duration: 1000
  })
}

onMounted(() => {
  updateTime()
  timer = window.setInterval(updateTime, 1000)
  
  // 获取完整的用户信息
  updateUserInfo()
  
  // TODO: 获取今日累计金额
})

onUnmounted(() => {
  clearInterval(timer)
})
</script>

<style lang="scss" scoped>
.home-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20px;

  .user-info-bar {
    display: flex;
    align-items: center;
    padding: 16px;
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 16px;
    
    .user-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 12px;
      
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    
    .user-details {
      flex: 1;
      
      .user-name {
        font-size: 16px;
        font-weight: 500;
        color: #323233;
      }
      
      .user-role {
        font-size: 12px;
        color: #969799;
        margin-top: 2px;
      }
    }
    
    .logout-btn {
      font-size: 14px;
      color: #ff4d4f;
      display: flex;
      align-items: center;
      cursor: pointer;
      
      .van-icon {
        margin-right: 4px;
      }
    }
  }

  .header {
    background-color: #ee0a24;
    color: white;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;

    &.income {
      background-color: #07c160;
    }

    .time {
      font-size: 48px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 10px;
    }

    .amount {
      font-size: 24px;
      text-align: center;

      .value {
        font-weight: bold;
      }
    }
  }

  .action-buttons {
    .btn {
      margin-bottom: 15px;
      height: 60px;
      font-size: 20px;
      border-radius: 8px;
      position: relative;

      &.history {
        color: #323233;
        
        .btn-hint {
          font-size: 12px;
          opacity: 0.8;
          margin-top: 2px;
        }
      }
    }
  }

  .quick-actions {
    margin-top: 10px;
    background-color: #fff;
    border-radius: 12px;
    padding: 15px;
    
    .quick-actions-title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 15px;
    }
    
    .quick-actions-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      
      .quick-action-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px 0;
        border-radius: 8px;
        background-color: #f7f8fa;
        cursor: pointer;
        
        &:active {
          background-color: #eff0f1;
        }
        
        span {
          margin-top: 6px;
          font-size: 12px;
          color: #646566;
        }
      }
    }
  }

  .voice-record {
    margin-top: auto;
    padding-bottom: 20px;

    .voice-btn {
      height: 60px;
      font-size: 20px;
    }
  }
}
</style> 